<!--
 * @Author: 29340 2934022986@qq.com
 * @Date: 2025-04-07 14:51:01
 * @LastEditors: 29340 2934022986@qq.com
 * @LastEditTime: 2025-04-07 14:51:23
 * @FilePath: \Exam system\src\components\StatCard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="stat-card">
      <i :class="['el-icon-' + icon]" :style="{ color: color }"></i>
      <h4>{{ title }}</h4>
      <p>{{ value }}</p>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    title: {
      type: String,
      required: true
    },
    value: {
      type: [Number, String],
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#333'
    }
  });
  </script>
  
  <style scoped>
  .stat-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .stat-card i {
    font-size: 32px;
    margin-bottom: 10px;
  }
  
  .stat-card h4 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  
  .stat-card p {
    font-size: 24px;
    font-weight: bold;
  }
  </style>